<template>
  <!-- 显示底部弹窗 -->
  <u-popup
    v-model="showBottom"
    mode="bottom"
    :mask-close-able="false"
    height="650rpx"
    closeable
    @close="closePopup"
  >
    <view class="popupContainer">
      <text class="title">测评报告解锁</text>
      <view class="content">
        你是否曾经好奇自己真正的性格特质？本报告涵盖8个维度，即将为你解开内心深处的谜团。无论是了解自己、改善关系还是个人成长，它将给你指引和启示。完成支付，即可查看当前报告详细内容。
      </view>
      <text class="priceDesc"
        >活动限时优惠价：<text class="priceText">{{ price }}元</text></text
      >
      <view class="bottom_btn">
        <view class="bottom_btn_agree" @click="handleWechatPay">
          微信支付
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    price: {
      type: Number,
      price: 0,
    },
  },
  data() {
    return {
      showBottom: false,
    };
  },
  created() {},
  methods: {
    init() {
      this.showBottom = true;
    },
    handleWechatPay() {
      this.$emit("componentPay", {
        type: 1, //自定义参数 1.原价购买 2.减免10元优惠券购买,3.减免20元优惠券购买
      });
    },
    closePopup() {
      this.$emit("closeBottomDialogBack", {});
    },
  },
};
</script>

<style lang="scss" scoped>
.popupContainer {
  display: flex;
  flex-direction: column;
  padding-left: 50rpx;
  padding-right: 50rpx;
}
.title {
  font-size: 32rpx;
  color: #222222;
  font-weight: 500;
  margin-top: 70rpx;
  text-align: center;
}
.content {
  margin-top: 40rpx;
}
.priceDesc {
  margin-top: 50rpx;
  text-align: center;
}
.priceText {
  color: red;
}
.bottom_btn {
  display: flex;
  justify-content: row;
  margin-top: 50rpx;
}

.bottom_btn_agree {
  flex: 1;
  width: 40%;
  height: 88rpx;
  color: #ffffff;
  text-align: center;
  margin-left: 20rpx;
  background: #15c297;
  border-radius: 44rpx;
  line-height: 88rpx;
}
</style>
